<template>
    <div v-if="show" class="magic-effect-container">
        <!-- 闪光粒子 -->
        <div class="magic-spark"></div>
        <div class="magic-spark"></div>
        <div class="magic-spark"></div>
        <div class="magic-spark"></div>
        <!-- 魔法光环 -->
        <div class="magic-circle"></div>
        <!-- 流星效果 -->
        <div class="meteor meteor-1"></div>
        <div class="meteor meteor-2"></div>
        <div class="meteor meteor-3"></div>
        <div class="meteor meteor-4"></div>
        <div class="meteor meteor-5"></div>
        <div class="meteor meteor-6"></div>
        <div class="meteor meteor-7"></div>
        <div class="meteor meteor-8"></div>
        <div class="meteor meteor-9"></div>
        <div class="meteor meteor-10"></div>
        <div class="meteor meteor-11"></div>
        <div class="meteor meteor-12"></div>
        <div class="meteor meteor-13"></div>
        <div class="meteor meteor-14"></div>
        <div class="meteor meteor-15"></div>

        <div class="magic-circle-container">
            <!-- 魔法阵外圈 -->
            <div class="magic-circle-outer"></div>
            <!-- 魔法阵中圈 -->
            <div class="magic-circle-middle"></div>
            <!-- 魔法阵内圈 -->
            <div class="magic-circle-inner"></div>
            <!-- 魔法阵核心层 -->
            <div class="magic-circle-core"></div>

            <!-- 复杂六芒星核心 -->
            <div class="complex-hexagram">
                <!-- 六芒星主体 -->
                <div class="hexagram-body"></div>
                <!-- 六芒星内部装饰 -->
                <div class="hexagram-inner">
                    <div class="small-rune small-rune-1">𐌏</div>
                    <div class="small-rune small-rune-2">𐌐</div>
                    <div class="small-rune small-rune-3">𐌑</div>
                    <div class="small-rune small-rune-4">𐌒</div>
                    <div class="small-rune small-rune-5">𐌓</div>
                    <div class="small-rune small-rune-6">𐌔</div>
                </div>
                <!-- 六芒星周围的符号 -->
                <div class="hexagram-symbols">
                    <div class="hexagram-symbol symbol-1">✦</div>
                    <div class="hexagram-symbol symbol-2">✵</div>
                    <div class="hexagram-symbol symbol-3">✶</div>
                    <div class="hexagram-symbol symbol-4">✷</div>
                    <div class="hexagram-symbol symbol-5">✸</div>
                    <div class="hexagram-symbol symbol-6">✹</div>
                </div>
            </div>

            <!-- 魔法符文层 -->
            <div class="magic-runes">
                <div class="rune rune-1">𐌀</div>
                <div class="rune rune-2">𐌁</div>
                <div class="rune rune-3">𐌂</div>
                <div class="rune rune-4">𐌃</div>
                <div class="rune rune-5">𐌄</div>
                <div class="rune rune-6">𐌅</div>
                <div class="rune rune-7">𐌆</div>
                <div class="rune rune-8">𐌇</div>
                <div class="rune rune-9">𐌈</div>
                <div class="rune rune-10">𐌉</div>
                <div class="rune rune-11">𐌊</div>
                <div class="rune rune-12">𐌋</div>
                <!-- 小型符文 -->
                <div class="small-rune small-rune-1">𐌏</div>
                <div class="small-rune small-rune-2">𐌐</div>
                <div class="small-rune small-rune-3">𐌑</div>
                <div class="small-rune small-rune-4">𐌒</div>
                <div class="small-rune small-rune-5">𐌓</div>
                <div class="small-rune small-rune-6">𐌔</div>
            </div>

            <!-- 外环魔法文字 -->
            <div class="magic-text">
                <div class="magic-text-ring">
                    <span class="magic-text-char" style="transform: rotate(0deg) translateY(-170px)">A</span>
                    <span class="magic-text-char" style="transform: rotate(30deg) translateY(-170px)">B</span>
                    <span class="magic-text-char" style="transform: rotate(60deg) translateY(-170px)">R</span>
                    <span class="magic-text-char" style="transform: rotate(90deg) translateY(-170px)">A</span>
                    <span class="magic-text-char" style="transform: rotate(120deg) translateY(-170px)">C</span>
                    <span class="magic-text-char" style="transform: rotate(150deg) translateY(-170px)">D</span>
                    <span class="magic-text-char" style="transform: rotate(180deg) translateY(-170px)">A</span>
                    <span class="magic-text-char" style="transform: rotate(210deg) translateY(-170px)">E</span>
                    <span class="magic-text-char" style="transform: rotate(240deg) translateY(-170px)">L</span>
                    <span class="magic-text-char" style="transform: rotate(270deg) translateY(-170px)">M</span>
                    <span class="magic-text-char" style="transform: rotate(300deg) translateY(-170px)">U</span>
                    <span class="magic-text-char" style="transform: rotate(330deg) translateY(-170px)">S</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from 'vue';

// 定义props，支持传入特效类型和角色信息
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    effectType: {
        type: String,
        default: 'default' // 默认特效类型
    },
    character: {
        type: String,
        default: '' // 角色信息，用于区分不同角色的特效
    },
    duration: {
        type: Number,
        default: 8000 // 特效持续时间，默认8秒
    }
});

// 内部控制显示状态
const internalShow = ref(props.show);

// 监听外部show属性变化
watch(() => props.show, (newValue) => {
    if (newValue) {
        internalShow.value = true;
        // 定时隐藏特效
        setTimeout(() => {
            internalShow.value = false;
        }, props.duration);
    } else {
        internalShow.value = false;
    }
});

// 暴露触发特效的方法
const emit = defineEmits(['effectEnd']);

// 监听内部显示状态变化，通知父组件特效结束
watch(internalShow, (newValue, oldValue) => {
    if (oldValue === true && newValue === false) {
        emit('effectEnd');
    }
});
</script>

<style scoped>
/* 魔法特效容器 */
.magic-effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* 魔法闪光效果 */
.magic-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    animation: magicSpark 3s ease-out forwards;
}

.magic-spark:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
    background: #ff6b6b;
    box-shadow: 0 0 20px 8px rgba(255, 107, 107, 0.8);
}

.magic-spark:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.3s;
    background: #4ecdc4;
    box-shadow: 0 0 20px 8px rgba(78, 205, 196, 0.8);
}

.magic-spark:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.6s;
    background: #ffe66d;
    box-shadow: 0 0 20px 8px rgba(255, 230, 109, 0.8);
}

.magic-spark:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.9s;
    background: #6a0572;
    box-shadow: 0 0 20px 8px rgba(106, 5, 114, 0.8);
}

/* 魔法光环效果 */
.magic-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(108, 99, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: magicCircle 3s ease-out forwards;
    box-shadow: 0 0 30px 10px rgba(108, 99, 255, 0.3);
}

.magic-circle::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 240px;
    height: 240px;
    border: 2px dashed rgba(78, 205, 196, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: magicCircle 4s ease-out forwards 0.5s;
}

/* 流星效果 */
.meteor {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: meteor 3s ease-out forwards;
    background: linear-gradient(90deg, transparent 0%, currentColor 100%);
}

/* 流星样式 */
.meteor-1 {
    top: -10%;
    left: 10%;
    animation-delay: 0s;
    color: #ff6b6b;
    box-shadow: 0 0 25px 8px rgba(255, 107, 107, 0.8), 0 0 40px 15px rgba(255, 107, 107, 0.4);
    width: 8px;
    height: 8px;
}

.meteor-2 {
    top: -10%;
    left: 30%;
    animation-delay: 0.5s;
    color: #4ecdc4;
    box-shadow: 0 0 25px 8px rgba(78, 205, 196, 0.8), 0 0 40px 15px rgba(78, 205, 196, 0.4);
    width: 7px;
    height: 7px;
}

.meteor-3 {
    top: -10%;
    left: 50%;
    animation-delay: 1s;
    color: #ffe66d;
    box-shadow: 0 0 25px 8px rgba(255, 230, 109, 0.8), 0 0 40px 15px rgba(255, 230, 109, 0.4);
    width: 9px;
    height: 9px;
}

.meteor-4 {
    top: -10%;
    left: 70%;
    animation-delay: 1.5s;
    color: #6a0572;
    box-shadow: 0 0 25px 8px rgba(106, 5, 114, 0.8), 0 0 40px 15px rgba(106, 5, 114, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-5 {
    top: -10%;
    left: 90%;
    animation-delay: 2s;
    color: #6c63ff;
    box-shadow: 0 0 25px 8px rgba(108, 99, 255, 0.8), 0 0 40px 15px rgba(108, 99, 255, 0.4);
    width: 8px;
    height: 8px;
}

.meteor-6 {
    top: 20%;
    left: -10%;
    animation-delay: 0.2s;
    color: #ff8c42;
    box-shadow: 0 0 20px 6px rgba(255, 140, 66, 0.8), 0 0 35px 12px rgba(255, 140, 66, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-7 {
    top: 40%;
    left: -10%;
    animation-delay: 0.7s;
    color: #a8e6cf;
    box-shadow: 0 0 20px 6px rgba(168, 230, 207, 0.8), 0 0 35px 12px rgba(168, 230, 207, 0.4);
    width: 7px;
    height: 7px;
}

.meteor-8 {
    top: 60%;
    left: -10%;
    animation-delay: 1.2s;
    color: #dcedc1;
    box-shadow: 0 0 20px 6px rgba(220, 237, 193, 0.8), 0 0 35px 12px rgba(220, 237, 193, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-9 {
    top: 80%;
    left: -10%;
    animation-delay: 1.7s;
    color: #ffaaa5;
    box-shadow: 0 0 20px 6px rgba(255, 170, 165, 0.8), 0 0 35px 12px rgba(255, 170, 165, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-10 {
    top: -10%;
    left: 20%;
    animation-delay: 0.4s;
    color: #ffd3b6;
    box-shadow: 0 0 20px 6px rgba(255, 211, 182, 0.8), 0 0 35px 12px rgba(255, 211, 182, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-11 {
    top: -10%;
    left: 40%;
    animation-delay: 0.9s;
    color: #e84a5f;
    box-shadow: 0 0 20px 6px rgba(232, 74, 95, 0.8), 0 0 35px 12px rgba(232, 74, 95, 0.4);
    width: 7px;
    height: 7px;
}

.meteor-12 {
    top: -10%;
    left: 60%;
    animation-delay: 1.4s;
    color: #ff9aa2;
    box-shadow: 0 0 20px 6px rgba(255, 154, 162, 0.8), 0 0 35px 12px rgba(255, 154, 162, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-13 {
    top: -10%;
    left: 80%;
    animation-delay: 1.9s;
    color: #b5ead7;
    box-shadow: 0 0 20px 6px rgba(181, 234, 215, 0.8), 0 0 35px 12px rgba(181, 234, 215, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-14 {
    top: 25%;
    left: -15%;
    animation-delay: 0.6s;
    color: #c7ceea;
    box-shadow: 0 0 20px 6px rgba(199, 206, 234, 0.8), 0 0 35px 12px rgba(199, 206, 234, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-15 {
    top: 75%;
    left: -15%;
    animation-delay: 1.6s;
    color: #ffc7ce;
    box-shadow: 0 0 20px 6px rgba(255, 199, 206, 0.8), 0 0 35px 12px rgba(255, 199, 206, 0.4);
    width: 7px;
    height: 7px;
}

/* 从左侧出现的流星动画变体 */
.meteor-6,
.meteor-7,
.meteor-8,
.meteor-9,
.meteor-14,
.meteor-15 {
    animation-name: meteorFromLeft;
}

/* 魔法阵容器 */
.magic-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: magicCircleAppear 1s ease-out forwards 0.2s;
    z-index: 4;
}

/* 魔法阵外圈 */
.magic-circle-outer {
    position: absolute;
    width: 360px;
    height: 360px;
    border: 2px solid #8a2be2;
    border-radius: 50%;
    animation: magicCircleRotate 20s linear infinite;
    box-shadow: 0 0 80px 25px rgba(138, 43, 226, 0.5), 0 0 120px 40px rgba(138, 43, 226, 0.2);
    background-image: radial-gradient(circle at 40px 40px, #ff3366 6px, transparent 6px),
    radial-gradient(circle at 320px 40px, #33ccff 6px, transparent 6px),
    radial-gradient(circle at 40px 320px, #ffcc00 6px, transparent 6px),
    radial-gradient(circle at 320px 320px, #8a2be2 6px, transparent 6px);
}

/* 魔法阵中圈 */
.magic-circle-middle {
    position: absolute;
    width: 280px;
    height: 280px;
    border: 2px solid #00ced1;
    border-radius: 50%;
    animation: magicCircleRotate 15s linear infinite;
    box-shadow: 0 0 60px 20px rgba(0, 206, 209, 0.4), 0 0 100px 35px rgba(0, 206, 209, 0.15);
}

/* 魔法阵内圈 */
.magic-circle-inner {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #ffcc00;
    border-radius: 50%;
    animation: magicCircleRotate 10s linear infinite;
    box-shadow: 0 0 40px 15px rgba(255, 204, 0, 0.3), 0 0 80px 30px rgba(255, 204, 0, 0.1);
}

/* 魔法阵核心层 */
.magic-circle-core {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(255, 107, 107, 0.7);
    border-radius: 50%;
    animation: magicCircleRotate 8s linear infinite reverse;
    box-shadow: 0 0 30px 10px rgba(255, 107, 107, 0.3), 0 0 60px 20px rgba(255, 107, 107, 0.1);
    background-image: radial-gradient(circle at 35px 35px, rgba(255, 107, 107, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 105px 35px, rgba(78, 205, 196, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 35px 105px, rgba(255, 230, 109, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 105px 105px, rgba(108, 99, 255, 0.5) 3px, transparent 3px);
}

/* 小型魔法符文 */
.small-rune {
    position: absolute;
    font-size: 18px;
    opacity: 0;
    animation: runeAppear 0.6s ease-out forwards;
    text-shadow: 0 0 15px currentColor;
}

.small-rune-1 {
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    color: #ff6b6b;
    animation-delay: 1.2s;
}

.small-rune-2 {
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    color: #4ecdc4;
    animation-delay: 1.4s;
}

.small-rune-3 {
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    color: #ffe66d;
    animation-delay: 1.6s;
}

.small-rune-4 {
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    color: #6c63ff;
    animation-delay: 1.8s;
}

.small-rune-5 {
    top: 35%;
    left: 35%;
    color: #ff6b6b;
    animation-delay: 2.0s;
}

.small-rune-6 {
    bottom: 35%;
    right: 35%;
    color: #4ecdc4;
    animation-delay: 2.2s;
}

/* 魔法阵中心 */
.magic-circle-center {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #8a2be2, #00ced1, #ffcc00, #8a2be2);
    background-size: 400% 400%;
    border-radius: 50%;
    animation: magicCirclePulse 2s ease-in-out infinite,
    magicCircleGlow 5s linear infinite;
    box-shadow: 0 0 70px 30px rgba(138, 43, 226, 0.8),
    0 0 120px 60px rgba(138, 43, 226, 0.3);
    z-index: 3;
}

/* 魔法符文容器 */
.magic-runes {
    position: absolute;
    width: 380px;
    height: 380px;
}

/* 魔法符文样式 */
.rune {
    position: absolute;
    font-size: 28px;
    opacity: 0;
    animation: runeAppear 0.6s ease-out forwards;
    text-shadow: 0 0 20px currentColor;
}

/* 所有动画关键帧 */
@keyframes meteor {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
        box-shadow: 0 0 10px 3px currentColor;
    }
    20% {
        opacity: 1;
        transform: translateY(100px) translateX(40px) scale(1.2);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(1200px) translateX(600px) scale(0.3);
        box-shadow: 0 0 5px 1px currentColor;
    }
}

@keyframes meteorFromLeft {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
        box-shadow: 0 0 10px 3px currentColor;
    }
    20% {
        opacity: 1;
        transform: translateY(40px) translateX(100px) scale(1.2);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(600px) translateX(1200px) scale(0.3);
        box-shadow: 0 0 5px 1px currentColor;
    }
}

@keyframes magicCircleAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes magicCircleGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes magicCircleRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes magicCirclePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 70px 30px rgba(138, 43, 226, 0.8),
        0 0 120px 60px rgba(138, 43, 226, 0.3);
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
        box-shadow: 0 0 90px 40px rgba(138, 43, 226, 0.9),
        0 0 160px 80px rgba(138, 43, 226, 0.4);
    }
}

@keyframes runeAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.magic-effect-container {
    position: fixed; /* 改为fixed定位，使其覆盖整个屏幕 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000; /* 设置高z-index确保在最上层 */
    overflow: hidden;
}

/* 魔法闪光效果 - 调整位置为屏幕中心 */
.magic-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    animation: magicSpark 3s ease-out forwards;
}

/* 调整闪光粒子位置为屏幕中心 */
.magic-spark:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
    background: #ff6b6b;
    box-shadow: 0 0 20px 8px rgba(255, 107, 107, 0.8);
}

.magic-spark:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.3s;
    background: #4ecdc4;
    box-shadow: 0 0 20px 8px rgba(78, 205, 196, 0.8);
}

.magic-spark:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.6s;
    background: #ffe66d;
    box-shadow: 0 0 20px 8px rgba(255, 230, 109, 0.8);
}

.magic-spark:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.9s;
    background: #6a0572;
    box-shadow: 0 0 20px 8px rgba(106, 5, 114, 0.8);
}

/* 魔法光环效果 - 调整为屏幕中心 */
.magic-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(108, 99, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: magicCircle 3s ease-out forwards;
    box-shadow: 0 0 30px 10px rgba(108, 99, 255, 0.3);
}

/* 添加第二个魔法光环 */
.magic-circle::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 240px;
    height: 240px;
    border: 2px dashed rgba(78, 205, 196, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: magicCircle 4s ease-out forwards 0.5s;
}

/* 新增：流星效果 */
.meteor {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: meteor 3s ease-out forwards;
    /* 添加拖尾效果 */
    background: linear-gradient(90deg, transparent 0%, currentColor 100%);
}

/* 为每个流星设置不同的起点、颜色和路径 */
.meteor-1 {
    top: -10%;
    left: 10%;
    animation-delay: 0s;
    color: #ff6b6b;
    box-shadow: 0 0 25px 8px rgba(255, 107, 107, 0.8), 0 0 40px 15px rgba(255, 107, 107, 0.4);
    width: 8px;
    height: 8px;
}

.meteor-2 {
    top: -10%;
    left: 30%;
    animation-delay: 0.5s;
    color: #4ecdc4;
    box-shadow: 0 0 25px 8px rgba(78, 205, 196, 0.8), 0 0 40px 15px rgba(78, 205, 196, 0.4);
    width: 7px;
    height: 7px;
}

.meteor-3 {
    top: -10%;
    left: 50%;
    animation-delay: 1s;
    color: #ffe66d;
    box-shadow: 0 0 25px 8px rgba(255, 230, 109, 0.8), 0 0 40px 15px rgba(255, 230, 109, 0.4);
    width: 9px;
    height: 9px;
}

.meteor-4 {
    top: -10%;
    left: 70%;
    animation-delay: 1.5s;
    color: #6a0572;
    box-shadow: 0 0 25px 8px rgba(106, 5, 114, 0.8), 0 0 40px 15px rgba(106, 5, 114, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-5 {
    top: -10%;
    left: 90%;
    animation-delay: 2s;
    color: #6c63ff;
    box-shadow: 0 0 25px 8px rgba(108, 99, 255, 0.8), 0 0 40px 15px rgba(108, 99, 255, 0.4);
    width: 8px;
    height: 8px;
}

/* 新增更多流星 - 从不同方向出现 */
.meteor-6 {
    top: 20%;
    left: -10%;
    animation-delay: 0.2s;
    color: #ff8c42;
    box-shadow: 0 0 20px 6px rgba(255, 140, 66, 0.8), 0 0 35px 12px rgba(255, 140, 66, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-7 {
    top: 40%;
    left: -10%;
    animation-delay: 0.7s;
    color: #a8e6cf;
    box-shadow: 0 0 20px 6px rgba(168, 230, 207, 0.8), 0 0 35px 12px rgba(168, 230, 207, 0.4);
    width: 7px;
    height: 7px;
}

.meteor-8 {
    top: 60%;
    left: -10%;
    animation-delay: 1.2s;
    color: #dcedc1;
    box-shadow: 0 0 20px 6px rgba(220, 237, 193, 0.8), 0 0 35px 12px rgba(220, 237, 193, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-9 {
    top: 80%;
    left: -10%;
    animation-delay: 1.7s;
    color: #ffaaa5;
    box-shadow: 0 0 20px 6px rgba(255, 170, 165, 0.8), 0 0 35px 12px rgba(255, 170, 165, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-10 {
    top: -10%;
    left: 20%;
    animation-delay: 0.4s;
    color: #ffd3b6;
    box-shadow: 0 0 20px 6px rgba(255, 211, 182, 0.8), 0 0 35px 12px rgba(255, 211, 182, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-11 {
    top: -10%;
    left: 40%;
    animation-delay: 0.9s;
    color: #e84a5f;
    box-shadow: 0 0 20px 6px rgba(232, 74, 95, 0.8), 0 0 35px 12px rgba(232, 74, 95, 0.4);
    width: 7px;
    height: 7px;
}

.meteor-12 {
    top: -10%;
    left: 60%;
    animation-delay: 1.4s;
    color: #ff9aa2;
    box-shadow: 0 0 20px 6px rgba(255, 154, 162, 0.8), 0 0 35px 12px rgba(255, 154, 162, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-13 {
    top: -10%;
    left: 80%;
    animation-delay: 1.9s;
    color: #b5ead7;
    box-shadow: 0 0 20px 6px rgba(181, 234, 215, 0.8), 0 0 35px 12px rgba(181, 234, 215, 0.4);
    width: 6px;
    height: 6px;
}

.meteor-14 {
    top: 25%;
    left: -15%;
    animation-delay: 0.6s;
    color: #c7ceea;
    box-shadow: 0 0 20px 6px rgba(199, 206, 234, 0.8), 0 0 35px 12px rgba(199, 206, 234, 0.4);
    width: 5px;
    height: 5px;
}

.meteor-15 {
    top: 75%;
    left: -15%;
    animation-delay: 1.6s;
    color: #ffc7ce;
    box-shadow: 0 0 20px 6px rgba(255, 199, 206, 0.8), 0 0 35px 12px rgba(255, 199, 206, 0.4);
    width: 7px;
    height: 7px;
}

/* 流星动画 - 增加更多方向的移动 */
@keyframes meteor {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
        box-shadow: 0 0 10px 3px currentColor;
    }
    20% {
        opacity: 1;
        transform: translateY(100px) translateX(40px) scale(1.2);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(1200px) translateX(600px) scale(0.3);
        box-shadow: 0 0 5px 1px currentColor;
    }
}

/* 从左侧出现的流星动画变体 */
.meteor-6,
.meteor-7,
.meteor-8,
.meteor-9,
.meteor-14,
.meteor-15 {
    animation-name: meteorFromLeft;
}

@keyframes meteorFromLeft {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
        box-shadow: 0 0 10px 3px currentColor;
    }
    20% {
        opacity: 1;
        transform: translateY(40px) translateX(100px) scale(1.2);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(600px) translateX(1200px) scale(0.3);
        box-shadow: 0 0 5px 1px currentColor;
    }
}

/* 魔法阵容器 - 增强显示层级 */
.magic-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: magicCircleAppear 1s ease-out forwards 0.2s;
    z-index: 4;
}

/* 魔法阵出现动画 */
@keyframes magicCircleAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 魔法阵外圈 - 神秘紫色 */
.magic-circle-outer {
    position: absolute;
    width: 360px;
    height: 360px;
    border: 2px solid #8a2be2;
    border-radius: 50%;
    animation: magicCircleRotate 20s linear infinite;
    box-shadow: 0 0 80px 25px rgba(138, 43, 226, 0.5), 0 0 120px 40px rgba(138, 43, 226, 0.2);
    background-image: radial-gradient(circle at 40px 40px, #ff3366 6px, transparent 6px),
    radial-gradient(circle at 320px 40px, #33ccff 6px, transparent 6px),
    radial-gradient(circle at 40px 320px, #ffcc00 6px, transparent 6px),
    radial-gradient(circle at 320px 320px, #8a2be2 6px, transparent 6px);
}

/* 魔法阵中圈 - 青色光芒 */
.magic-circle-middle {
    position: absolute;
    width: 280px;
    height: 280px;
    border: 2px solid #00ced1;
    border-radius: 50%;
    animation: magicCircleRotate 15s linear infinite;
    box-shadow: 0 0 60px 20px rgba(0, 206, 209, 0.4), 0 0 100px 35px rgba(0, 206, 209, 0.15);
}

/* 魔法阵内圈 - 金色光辉 */
.magic-circle-inner {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #ffcc00;
    border-radius: 50%;
    animation: magicCircleRotate 10s linear infinite;
    box-shadow: 0 0 40px 15px rgba(255, 204, 0, 0.3), 0 0 80px 30px rgba(255, 204, 0, 0.1);
}

/* 新增：魔法阵核心层 - 小型内圈 */
.magic-circle-core {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(255, 107, 107, 0.7);
    border-radius: 50%;
    animation: magicCircleRotate 8s linear infinite reverse;
    box-shadow: 0 0 30px 10px rgba(255, 107, 107, 0.3), 0 0 60px 20px rgba(255, 107, 107, 0.1);
    background-image: radial-gradient(circle at 35px 35px, rgba(255, 107, 107, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 105px 35px, rgba(78, 205, 196, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 35px 105px, rgba(255, 230, 109, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 105px 105px, rgba(108, 99, 255, 0.5) 3px, transparent 3px);
}

/* 小型魔法符文 */
.small-rune {
    position: absolute;
    font-size: 18px;
    opacity: 0;
    animation: runeAppear 0.6s ease-out forwards;
    text-shadow: 0 0 15px currentColor;
}

.small-rune-1 {
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    color: #ff6b6b;
    animation-delay: 1.2s;
}

.small-rune-2 {
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    color: #4ecdc4;
    animation-delay: 1.4s;
}

.small-rune-3 {
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    color: #ffe66d;
    animation-delay: 1.6s;
}

.small-rune-4 {
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    color: #6c63ff;
    animation-delay: 1.8s;
}

.small-rune-5 {
    top: 35%;
    left: 35%;
    color: #ff6b6b;
    animation-delay: 2.0s;
}

.small-rune-6 {
    bottom: 35%;
    right: 35%;
    color: #4ecdc4;
    animation-delay: 2.2s;
}

/* 六芒星核心 - 使用CSS创建六芒星形状 */
.magic-hexagram {
    position: absolute;
    width: 160px;
    height: 160px;
    transform: rotate(30deg);
}

/* 魔法阵中心 - 发光核心 */
.magic-circle-center {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #8a2be2, #00ced1, #ffcc00, #8a2be2);
    background-size: 400% 400%;
    border-radius: 50%;
    animation: magicCirclePulse 2s ease-in-out infinite,
    magicCircleGlow 5s linear infinite;
    box-shadow: 0 0 70px 30px rgba(138, 43, 226, 0.8),
    0 0 120px 60px rgba(138, 43, 226, 0.3);
    z-index: 3;
}

/* 中心发光颜色变化动画 */
@keyframes magicCircleGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 魔法阵旋转动画 */
@keyframes magicCircleRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 魔法阵中心脉冲动画 */
@keyframes magicCirclePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 70px 30px rgba(138, 43, 226, 0.8),
        0 0 120px 60px rgba(138, 43, 226, 0.3);
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
        box-shadow: 0 0 90px 40px rgba(138, 43, 226, 0.9),
        0 0 160px 80px rgba(138, 43, 226, 0.4);
    }
}

/* 魔法符文容器 */
.magic-runes {
    position: absolute;
    width: 380px;
    height: 380px;
}

/* 魔法符文样式 */
.rune {
    position: absolute;
    font-size: 28px;
    opacity: 0;
    animation: runeAppear 0.8s ease-out forwards;
    text-shadow: 0 0 20px currentColor;
}

.rune-1 {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #ff3366;
    animation-delay: 1s;
}

.rune-2 {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #ff3366;
    animation-delay: 1.2s;
}

.rune-3 {
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    color: #33ccff;
    animation-delay: 1.4s;
}

.rune-4 {
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    color: #33ccff;
    animation-delay: 1.6s;
}

.rune-5 {
    top: 20%;
    left: 20%;
    color: #ffcc00;
    animation-delay: 1.8s;
}

.rune-6 {
    bottom: 20%;
    right: 20%;
    color: #ffcc00;
    animation-delay: 2s;
}

/* 符文出现动画 */
@keyframes runeAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* 魔法文字圆环 - 使用CSS绘制简单的魔法文字效果 */
.magic-text {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0%, transparent 75%, rgba(138, 43, 226, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 100% 50%, transparent 75%, rgba(0, 206, 209, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 50% 100%, transparent 75%, rgba(255, 204, 0, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 0% 50%, transparent 75%, rgba(138, 43, 226, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 70% 25%, transparent 75%, rgba(0, 206, 209, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 25% 75%, transparent 75%, rgba(255, 204, 0, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 75% 75%, transparent 75%, rgba(138, 43, 226, 0.3) 76%, transparent 77%),
    radial-gradient(circle at 25% 25%, transparent 75%, rgba(0, 206, 209, 0.3) 76%, transparent 77%);
    animation: magicCircleRotate 30s linear infinite reverse;
    z-index: -1;
}

/* 复杂六芒星核心 - 类似图片效果 */
.complex-hexagram {
    position: absolute;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 4;
}

/* 六芒星主体 */
.hexagram-body {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* 六芒星内部装饰 */
.hexagram-inner {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background-image: linear-gradient(120deg, rgba(138, 43, 226, 0.3) 25%, transparent 25%),
    linear-gradient(240deg, rgba(138, 43, 226, 0.3) 25%, transparent 25%),
    linear-gradient(0deg, rgba(138, 43, 226, 0.3) 25%, transparent 25%),
    linear-gradient(180deg, rgba(0, 206, 209, 0.3) 25%, transparent 25%),
    linear-gradient(60deg, rgba(0, 206, 209, 0.3) 25%, transparent 25%),
    linear-gradient(300deg, rgba(0, 206, 209, 0.3) 25%, transparent 25%);
    background-size: 100% 100%;
    animation: hexagramPulse 4s ease-in-out infinite;
}

/* 六芒星周围的符号 */
.hexagram-symbols {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hexagram-symbol {
    position: absolute;
    font-size: 32px;
    color: #ffcc00;
    text-shadow: 0 0 20px rgba(255, 204, 0, 0.8);
    animation: symbolFloat 3s ease-in-out infinite;
}

.hexagram-symbol.symbol-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.hexagram-symbol.symbol-2 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.5s;
}

.hexagram-symbol.symbol-3 {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation-delay: 1s;
}

.hexagram-symbol.symbol-4 {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: 1.5s;
}

.hexagram-symbol.symbol-5 {
    top: 20%;
    left: 20%;
    animation-delay: 2s;
}

.hexagram-symbol.symbol-6 {
    bottom: 20%;
    right: 20%;
    animation-delay: 2.5s;
}

/* 符号浮动动画 */
@keyframes symbolFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) translateY(-10px);
        opacity: 1;
    }
}

/* 六芒星脉冲动画 */
@keyframes hexagramPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* 扩展魔法符文数量 */
.rune {
    position: absolute;
    font-size: 28px;
    opacity: 0;
    animation: runeAppear 0.8s ease-out forwards;
    text-shadow: 0 0 20px currentColor;
}

.rune-7 {
    top: 30%;
    left: 10%;
    color: #ff3366;
    animation-delay: 2.2s;
}

.rune-8 {
    bottom: 30%;
    right: 10%;
    color: #ff3366;
    animation-delay: 2.4s;
}

.rune-9 {
    top: 70%;
    left: 30%;
    color: #33ccff;
    animation-delay: 2.6s;
}

.rune-10 {
    bottom: 70%;
    right: 30%;
    color: #33ccff;
    animation-delay: 2.8s;
}

.rune-11 {
    top: 10%;
    left: 70%;
    color: #ffcc00;
    animation-delay: 3s;
}

.rune-12 {
    bottom: 10%;
    right: 70%;
    color: #ffcc00;
    animation-delay: 3.2s;
}

/* 魔法文字圆环 */
.magic-text-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: magicCircleRotate 60s linear infinite;
}

.magic-text-char {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    font-size: 24px;
    color: rgba(138, 43, 226, 0.8);
    text-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
    font-family: 'Times New Roman', serif;
    font-style: italic;
}
</style>